// @ts-ignore
import {BorderBox1, CapsuleChart, Loading, PercentPond, ScrollBoard} from '@jiaminghi/data-view-react'
import {useEffect, useState} from "react";

const DataView = () => {
    const [isLoading, setIsLoading] = useState(true)
    useEffect(() => {
        setTimeout(() => {
            setIsLoading(false)
        }, 1000)
    }, [])
    return (
        <div className={"min-h-full"}>
            <BorderBox1>
                <div className="h-[200px] flex flex-col items-center justify-center">
                    {isLoading ? <Loading>Loading...</Loading> :
                    <div className="flex flex-row items-center justify-center  gap-[30px]">
                        <PercentPond config={{
                            value: 66
                        }} style={{width: '200px', height: '100px'}}/>
                        <PercentPond config={{
                            value: 66
                        }} style={{width: '200px', height: '100px'}}/>
                        <PercentPond config={{
                            value: 66
                        }} style={{width: '200px', height: '100px'}}/>
                    </div>}

                </div>

            </BorderBox1>


            <div className="flex flex-row gap-[20px] p-[20px]">

                <ScrollBoard config={{
                    data: [
                        ['张三', '行1列2', '行1列3'],
                        ['李四', '行2列2', '行2列3'],
                        ['王五', '行3列2', '行3列3'],
                        ['赵六', '行4列2', '行4列3'],
                        ['小张', '行10列2', '行10列3'],
                        ['小李', '行10列2', '行10列3'],
                    ]
                }} style={{width: '500px', height: '220px'}}/>
                <CapsuleChart config={{
                    data: [
                        {
                            name: '南阳',
                            value: 167
                        },
                        {
                            name: '周口',
                            value: 67
                        },
                        {
                            name: '漯河',
                            value: 123
                        },
                        {
                            name: '郑州',
                            value: 55
                        },
                        {
                            name: '西峡',
                            value: 98
                        }
                    ]
                }} style={{width: 300, height: 200}}/>

            </div>



        </div>
    );
};

export default DataView;
